<template>
  <view class="picker-comp">
    <view class="h-90 pl-32 pr-32 flex f-jc-between f-ai-center" style="border-radius: 12rpx 12rpx 0 0;">
      <view v-for="(item, index) in tabs" :key="item.name" class="fs-30" :class="item.active ? 'cfs-fd6801' : 'cfs-666'"
        @click="click(item, index)">
        <text v-if="index === 0">{{ pickerObj.distance || item.title }}</text>
        <text v-else-if="index === 1">{{ item.title }}</text>
        <text v-else>{{ pickerObj.tag || item.title }}</text>

        <text v-if="item.active" class="iconfont icon-shixinjiantouxiangxia"></text>
        <text v-else class="iconfont icon-shixinjiantouxiangshang"></text>
      </view>
    </view>
    <u-action-sheet v-if="selectIndex === 0 || selectIndex === 2" :actions="pickerOptions[selectIndex]"
      :title="tabs[selectIndex].title" :show="tabs[selectIndex].active" round="16" cancelText="重置" safeAreaInsetBottom
      :closeOnClickOverlay="false" :closeOnClickAction="false" @select="selectClick" @close="closeAction">
    </u-action-sheet>
  </view>

</template>
<script>
export default {
  name: 'PickerComp',
  data() {
    return {
      tabs: [{ name: 'location', title: '距离', active: false },
      { name: 'food', title: '美食', active: false },
      { name: 'select', title: '筛选', active: false }],
      selectIndex: -1, //记录当前点击的是哪个tab
      pickerOptions: [
        [{ name: '默认排序', color: '' }, { name: '离我最近', color: '' }],
        [{ name: 'a', color: '' }, { name: 'b', color: '' }],
        [{ name: '堂食', color: '' }, { name: '点外卖', color: '' }, { name: '提前预约', color: '' }],
      ],
      pickerObj: {
        distance: '',
        tag: ''
      }
    }
  },
  methods: {
    click(item, index) {
      this.selectIndex = index
      item.active = !item.active
    },
    selectClick(item) {
      console.log('item', item)
      if (this.selectIndex === 0) {
        if (this.pickerObj.distance === item.name) {
          this.tabs[0].active = false
          return

        }
        this.pickerObj.distance = item.name
        this.pickerOptions[0].forEach(itemY => itemY.color = '')

      }
      else if (this.selectIndex === 2) {
        if (this.pickerObj.tag === item.name) {
          this.tabs[2].active = false
          return
        }
        this.pickerObj.tag = item.name
        this.pickerOptions[2].forEach(itemY => itemY.color = '')
      }
      item.color = '#fd6801'
      this.tabs[this.selectIndex].active = false
      this.$emit('selectData', this.pickerObj)

    },
    closeAction() {
      if (this.selectIndex === 0) {
        if (this.pickerObj.distance === '') {
          this.tabs[0].active = false
          return
        }
        this.pickerObj.distance = ''
        this.pickerOptions[0].forEach(itemY => itemY.color = '')
      }
      else if (this.selectIndex === 2) {
        if (this.pickerObj.tag === '') {
          this.tabs[2].active = false
          return
        }
        this.pickerObj.tag = ''
        this.pickerOptions[2].forEach(itemY => itemY.color = '')
      }
      this.tabs[this.selectIndex].active = false
      this.$emit('selectData', this.pickerObj)
    }
  },
  computed: {}
}
</script>
